<template>
  <div class="Footer">
    <h1>Footer</h1>
    <button @click="changeMsg">修改state中的msg</button>
    <button @click="addNNum(2)">传参累加Num</button>
    <button @click="getMovieList">获取电影</button>
  </div>
</template>

<script>
import { mapActions, mapMutations } from "vuex";
export default {
  name: "Footer",
  mounted() {
    console.log(this);
  },
  methods: {
    /* changeMsg() {
      // xxx this.$store._mutations.changeMsg;
      //不能直接调用一个 mutation handler
      //通过commit 唤醒  mutation handler
      this.$store.commit("changeMsg"); //第一个参数 mutation 函数名
    },
    addNNum(n) {
      //我们可以向commit提供额外的参数进行传递 即mutation的载荷(payload)
      //在大多数情况下 载荷应该是一个对象
      this.$store.commit("addNNum", n);
    }, */
    //使用辅助函数 mapMutations 将组件中的methods 映射store.commit调用
    //第一种书写方式 数组
    ...mapMutations("Movie", ["changeMsg", "addNNum"]),
    //第二种书写方式 对象 可以起别名
    // ...mapMutations({ changeStateMsg: "changeMsg", add: "addNNum" }),

    /* Action 通过 store.dispatch 方法触发
    getMovie() {
      this.$store.dispatch("getMovieList");
    }, */
    //使用辅助函数mapActions 进行dispatch分发
    ...mapActions("Movie",["getMovieList"]),
  },
};
</script>

<style scoped>
.Footer {
  width: 300px;
  height: 200px;
  margin: 0 auto;
  background-color: chocolate;
}
</style>
